<template>
  <div>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside>
        <el-menu
          class="el-menu-vertical-demo g-padding"
          :collapse="data.isCollapse"
          :unique-opened='true'
          :default-active="$route.path"
          router>
          <el-button @click="data.onMenu" type="primary" :icon="data.shrink" circle></el-button>
          <el-submenu v-for="(submenu, index) in data.menu" :key="submenu.index" :index="index + '1'">
            <template #title>
              <i :class="submenu.icon"></i>
              <span> {{submenu.title}} </span>
            </template>
            <el-menu-item-group>
              <el-menu-item v-for="(item, i) in submenu.items" :key="i" :index="item.path">
                {{item.name}}
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <!-- 头部 -->
        <el-header>
          <h2>王者荣耀后台管理界面</h2>
          <el-button type="primary" size="mini" plain round> 退 出 </el-button>
        </el-header>
        <!-- 内容 -->
        <el-main>
          <router-view :key="$route.path" />
        </el-main>
        <!-- 尾部 -->
        <el-footer>
          <p>版权所有 @穆土</p>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, computed } from 'vue';

interface dataDto {
  isCollapse: boolean;
  onMenu: () => void;
  shrink: any;
  menu: any[]
}

export default defineComponent({
  setup() {
    const data: dataDto = reactive({
      isCollapse: false,
      // 侧边栏的收缩
      onMenu: function() {
        data.isCollapse = !data.isCollapse;
      },
      // 图标的切换
      shrink: computed(() => {
        return data.isCollapse == false ? 'el-icon-arrow-left' : 'el-icon-arrow-right'
      }),
      // 菜单内容
      menu: [
        {
          title: '轮播图管理',
          icon: 'el-icon-picture',
          items: [
            { name: '轮播图列表', path: '/slides/list' },
            { name: '添加轮播图', path: '/slides/create' },
          ]
        },
         {
          title: '文章的管理',
          icon: 'el-icon-tickets',
          items: [
            { name: '文章列表', path: '/articles/list' },
            { name: '添加文章', path: '/articles/create' },
          ]
        },
        {
          title: '装备的管理',
          icon: 'el-icon-magic-stick',
          items: [
            { name: '装备列表', path: '/equips/list' },
            { name: '添加装备', path: '/equips/create' },
          ]
        },
        {
          title: '英雄的管理',
          icon: 'el-icon-trophy',
          items: [
            { name: '英雄列表', path: '/heros/list' },
            { name: '添加英雄', path: '/heros/create' },
          ]
        }
      ],
    })
    return {
      data
    }
    
  }
})
</script>

<style lang="scss" scoped>
/* 布局容器 */
.el-container {
  height: 100vh;
  .el-aside {
    /* 侧边栏按钮 */
    .el-button {
      margin-bottom: 10px;
    }
  }
  
  /* 左侧导航菜单 */
  .el-aside {
    width: auto;
    max-width: 200px;
    .el-menu {
      height: 100%;
    }
  }

  // 右侧头部
  .el-header {
    display: flex;
    justify-content: space-between;
    height: 80px;
    padding: 15px;
    letter-spacing: 4px;
    background-color: rgba(0, 255, 255, 0.062);
    h2 {
      font-size: 30px;
      font-weight: 200;
      line-height: 50px;
    }
    .el-button {
      font-size: 16px;
    }
  }

  // 中间
  .el-main {
    padding: 30px;
  }

  // 尾部
  .el-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e7e7e794;
    color: #6d6d6d94
  }
}

.g-padding {
  padding: 15px 0;
}
</style>
